<script setup lang="ts">
import { ref } from "vue";
import { useVModel } from "@vueuse/core";
// const isChecked = ref(false);

const props = withDefaults(
  defineProps<{ modelValue?: boolean; checked?: boolean }>(),
  { modelValue: undefined }
);

const emit = defineEmits<{
  (e: "update:modelValue", isAgree: boolean): void;
  (e: "onChange", checked: boolean): void;
}>();

// 是否使用双向数据绑定
const isVModel = typeof props.modelValue !== "undefined";

// 声明复选框是否选中状态
const isChecked = isVModel
  ? useVModel(props, "modelValue", emit)
  : ref(props.checked);
const toggle = () => {
  isChecked.value = !isChecked.value;
  if (!isVModel) emit("onChange", isChecked.value);
};
</script>
<template>
  <div class="xtx-checkbox" @click="toggle">
    <i class="iconfont icon-checked" v-if="isChecked"></i>
    <i class="iconfont icon-unchecked" v-else></i>
    <span v-if="$slots.default"><slot></slot></span>
  </div>
</template>

<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>
